/**
*@Author: 周贞荣
*@Date 2021/8/26 17:31
*@Description 组件名称首字母大写
*@File Login.vue 文件名称
*@Modify 最近修改人
*/
<template>
    <div class="w100 h100 flex flex-column">
        <div class="flex items-center">
            <div class="h100 flex-full drag"></div>
            <i class="el-icon-minus font20 cursor marginR10" @click.stop="ipc.send('minWin')"></i>
            <i class="el-icon-close font20 cursor padding10" @click.stop="ipc.send('close')"></i>
        </div>
        <div class="flex-full paddingH40 paddingT48">
            <h2 class="paddingV20 text-center">用户登录</h2>
            <el-form :model="loginForm" :rules="rules" ref="loginForm">
                <el-form-item prop="phone">
                    <el-input v-model.number="loginForm.phone" placeholder="手机号码" prefix-icon="el-icon-mobile"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="登录密码" prefix-icon="el-icon-key"
                              autocomplete="off"
                              show-password></el-input>
                </el-form-item>
                <ul class="flex justify-end paddingB20 cursor primary-color">
                    <li>忘记密码</li>
                </ul>
                <el-form-item>
                    <el-button :style="w100" type="primary" @click="submitForm('loginForm')">登 录</el-button>
                </el-form-item>
                <ul class="flex items-center paddingV20">
                    <li class="borderB1 flex-full"></li>
                    <li class="paddingH10">第三方登录</li>
                    <li class="borderB1 flex-full"></li>
                </ul>
                <div class="flex justify-center paddingT30">
                    <i @click="$message.warning('功能开发中敬请期待！')" class="el-icon-platform-eleme primary-color cursor"
                       style="font-size: 40px"></i>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                // 登录表单
                loginForm: {phone: '', password: ''},
                // 表单校验规则
                rules: {
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {validator: this.checkInput.phone, trigger: 'blur'},
                    ],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}]
                }
            }
        },
        methods: {
            /**
             * 登录表单校验
             * */
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    valid && this.httpClient.post(this.api.login, this.loginForm, ({token, userInfo}) => {
                        this.session.save('token', token);
                        this.session.save('userInfo', userInfo);
                        this.$router.replace({name: 'home'});
                        this.ipc.send('changeSize');
                    })
                    // if (valid) {
                    //     this.$router.replace({name: 'home'});
                    //     // 调用主应用尺寸更改函数
                    //     this.ipc.send('changeSize');
                    // }
                })
            }
        },
        /**
         * 组件加载渲染完成执行回调方法
         */
        mounted() {

        }
    }
</script>

<style scoped lang="scss">
    /*
*当前组件样式编写域
*/
    .drag {
        height: 30px;
    }
</style>
